<template>
	<view class="notice-main">
		<swiper class="notice-swiper" :style="'height:'+height+'rpx;line-height:'+height+'rpx;'" autoplay="true"
			:interval="interval" duration="1000" circular="true" :vertical="type==1?true:false">
			<swiper-item v-for="(list,index) in dataList" :key="index" @click.stop="clickList(list)">
				<view class="notice-swiper-item" >
					<view class="list-item-view">
						<image :src="logo" mode="" class="pic"></image>
						<view class="txxt-view">
							<view class="username">{{list.username}}</view>
							<view class="goods_name">抽中{{list.goods_name}}</view>
						</view>
					
						<image :src="list.goods_image" mode="" class="good-img"></image>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			//通知列表
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			//滚动类型(1:向上循环滚动;2:横向滚动)
			type: {
				type: Number,
				default: 1
			},
			//滚动时间间隔
			interval: {
				type: Number,
				default: 3000
			},
			//通告栏高度(rpx)
			height: {
				type: Number,
				default: 80
			},
			//字体大小(rpx)
			fontSize: {
				type: Number,
				default: 30
			},
			//字体颜色
			color: {
				type: String,
				default: '#333333'
			},
		},
		data() {
			return {
				logo: ''
			};
		},
		mounted() {
		
			this.getLogo()
		},
		methods: {
			getLogo(){
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					if (res.data.code == 1) {
						this.logo = res.data.data.app_logo
					}
				}).catch(err => {});
			},
			clickList(item) {
				this.$emit("click", item)
			}
		}
	}
</script>

<style scoped>
	.notice-main {
		width: 100%;
	}
/* 
	.notice-swiper-item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	} */
	.notice-swiper{
		/* background-color: red; */
	
	}
	.notice-swiper-item{
		width: 660rpx;
		height: 100%;
		background-image: url('https://z4a.net/images/2023/05/22/tgao.png');
		background-size: 100% 100%;
		margin: 0 auto;
	    display: flex;
		justify-content: center;
	    	/*  align-items: flex-end; */
		/* align-items: center; */
	}
		
	.list-item-view{
		display: flex;
		box-sizing: border-box;
	
	}

	.pic,.good-img{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}
	.txxt-view{
	   display: flex;
	   /* align-items: flex-end; */
	   align-items: center;
	   /* height: 80rpx; */
       /* line-height: 60rpx; */
	   box-sizing: border-box;
	   height: 50rpx;
	}
	.username,.goods_name{
		font-size: 24rpx;
		color: #fff;
		display: flex;
	}
	.username{
		width: 140rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.goods_name{
		width: 320rpx;
	   overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
</style>